<template>
    <div id="addMembersPage">
        <el-row>
            <el-col :span="12" :offset="6"><div id="addMembersPageForm">
                <el-form :model="addMemberForm" :rules="addMemberFormRules" ref="addMemberForm" label-width="90px" class="demo-ruleForm">
                    <el-form-item label="会员名" prop="memberName">
                        <el-input v-model="addMemberForm.memberName" placeholder="请输入会员名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="addMemberForm.memberSex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="memberIDCard">
                        <el-input placeholder="请输入身份证号" v-model="addMemberForm.memberIDCard"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="memberTel">
                        <el-input placeholder="请输入联系电话" v-model="addMemberForm.memberTel"></el-input>
                    </el-form-item>
                    <el-form-item label="支付密码" prop="memberPassword">
                        <el-input placeholder="请输入密码" type="password" v-model="addMemberForm.memberPassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkMemberPassword">
                        <el-input placeholder="请再次输入密码" type="password" v-model="addMemberForm.checkMemberPassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-col :span="5" :offset="5">
                                <el-button type="primary" @click="submitForm('addMemberForm')">提交</el-button>
                            </el-col>
                            <el-col :span="5" :offset="4">
                                <el-button @click="resetForm('addMemberForm')">重置</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-form>
            </div></el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import {memberName} from "../../http/api";

    export default {
        name: "addMembersPage",
        data () {
            //验证会员名
            let YZ_memberName = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入会员名'));
                }else {
                    if(!(this.memberNameState)){
                        callback('会员名已存在');
                    }
                    callback();
                }
            };
            //验证身份证
            let YZ_memberIDCard = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入身份证号'));
                } else {
                    if (!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value))) {
                        callback(new Error('身份证号输入错误'));
                    }
                    callback();
                }
            };
            //验证联系电话
            let YZ_memberTel = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入联系电话'));
                } else {
                    if (!(/^1[3456789]\d{9}$/.test(value))) {
                        callback(new Error('联系电话输入错误'));
                    }
                    callback();
                }
            };
            //验证支付密码
            let YZ_memberPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.addMemberForm.checkMemberPassword !== '') {
                        this.$refs.addMemberForm.validateField('checkMemberPassword');
                    }
                    callback();
                }
            };
            //验证两次密码是否一致
            let YZ_checkMemberPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.addMemberForm.memberPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                memberNameState:true,   //会员名是否可以注册
                addMemberForm:{    //表单输入项
                    memberName:'',    //会员名
                    memberPassword:'',   //支付密码
                    checkMemberPassword:'',   //再次输入的支付密码
                    memberSex: '男',   //性别
                    memberTel:'',   //联系电话
                    memberIDCard:'',   //身份证号
                },
                addMemberFormRules:{   //表单验证
                    memberName: [{ validator: YZ_memberName, trigger: 'blur' }],
                    memberIDCard: [{ validator: YZ_memberIDCard, trigger: 'blur' }],
                    memberTel: [{ validator: YZ_memberTel, trigger: 'blur' }],
                    memberPassword: [{ validator: YZ_memberPassword, trigger: 'blur' }],
                    checkMemberPassword: [{ validator: YZ_checkMemberPassword, trigger: 'blur' }]
                }
            };
        },
        watch:{
            'addMemberForm.memberName':function () {
                this.isTrueName();
            }
        },
        methods:{
            ...mapActions(['isTureMemberName','addMember']),
            isTrueName(){
                this.isTureMemberName({memberName:this.addMemberForm.memberName}).then(res=>{
                    // console.log(res);
                    res.code===200 ? this.memberNameState=true : this.memberNameState=false;
                });
            },
            submitForm(formName){   //点击提交
                this.$refs[formName].validate((valid) => {
                    if(valid){     //表单输入全部验证通过
                        this.addMember(this.addMemberForm).then(res=>{
                            if (res.code===200){
                                this.$message({
                                    type: 'success',
                                    message: '注册成功！'
                                });
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '注册失败！'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请输入正确的注册信息'
                        });
                        return false;
                    }
                });
            },
            resetForm(formName){   //点击重置
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped lang="less">
    #addMembersPage{
        min-height: 450px;
        background-color: #ffffff;
        #addMembersPageForm{
            padding-top: 20px;
        }
    }
    .inputHeader{
        width: 60px;
        text-align: center;
    }

</style>